<template>
	<view>

		<view class="topBox">
			<!-- 取还车门店及时间 -->
			<view class="configBox" @click.stop="showApplyAlert=true">
				<!-- 取车 -->
				<view class="storeConfig" style="align-items: flex-end;">
					<text class="store">{{takeAddress}}</text>
					<text>{{takeCarTime}}</text>
				</view>
				<!-- 租赁时长 -->
				<view class="duration">
					<!-- {{duration}} -->
					<image style="display: block; width: 35rpx; height: 20upx;" src="@/static/home/duration_arrow.png">
					</image>
				</view>
				<!-- 还车 -->
				<view class="storeConfig">
					<text class="store">{{returnAddress}}</text>
					<text>{{returnCarTime}}</text>
				</view>

				<view class="">
					<image style="margin-left: 20rpx; width: 30rpx; height: 30rpx;" src="/pagesA/static/order_edit.png"
						mode=""></image>
				</view>

			</view>
			<!-- 筛选 -->
			<view class="">
				<drop-down-filter :classification="classification" :storeId="storeId" @changeSort="changeSort"
					@filterFinish="filterFinish"></drop-down-filter>
			</view>
			<!-- 推荐标签筛选 -->
			<view class="" style="margin-top: 20rpx;padding: 0 20rpx;">
				<scroll-view scroll-x="true" class="lab-scroll-view">
					<text class="label" :class="{'active' : item.selected == true}" v-for="(item,index) in lables"
						:key="item.code" @click.stop="changeLable(item)">
						{{item.text}}
					</text>
				</scroll-view>
			</view>
		</view>


		<!-- 车型列表 -->
		<view class="carWrapper">
			<!-- 左边导航 -->
			<view class="leftBox">
				<scroll-view scroll-y="true" class="scroll-view">
					<view class="itemLeft" :class="{active: item.classification === classification}"
						v-for="(item, index) in categoryList" :key="item.classification"
						@tap="tabtap(item.classification)">
						<text class="title">{{item.operatingClassification}}</text>
						<text class="price">{{item.minPrice}}元起</text>
					</view>

				</scroll-view>
			</view>
			<!-- 右边内容 -->
			<view class="rightBox">
				<scroll-view scroll-y="true" class="scroll-view" v-if="carList.length > 0">
					<view class="itemRight" v-for="(item, index) in carList" :key="item.planId" @tap="goOrder(item)">
						<!-- 顶部 -->
						<view class="carInfoWrapper">

							<view class="carImgBox" @click.stop="carDetail(item)">
								<image class="carImg" :src="item.url|mmvImageUrl" mode="widthFix"></image>
								<text class="mark" v-if="item.isActivity===1">活动车型</text>
								<view class="zuman" v-if="item.carNum <= 0 || item.carNum == null">已租满</view>
							</view>

							<view class="carModelContent">
								<!-- <view class="carInfo">{{item.modelInfo}}</view> -->
								<view class="carInfo">{{item.brandName}}</view>
								<view class="carModel">{{item.modelName}}</view>
								<view class="other">
									{{item.operatingClassification||''}} {{item.speedChangingBox||''}}
									{{item.seating||''}}
								</view>
							</view>
						</view>
						<!-- 中间 -->
						<view class="carLabelWrapper" v-if="item.labels.length > 0">
							<view class="label" :class="{active:index ===0}" v-for="(label, index) in item.labels"
								:key="index">{{label}}</view>
						</view>
						<!-- 底部 -->
						<view class="bottomWrapper">
							<view class="totalPrice">
								<view style="margin-right: 15rpx; display: inline-block;" v-if="item.isActivity === 1">
									活动特惠已减
									<text style="text-decoration: line-through;">¥{{item.specialPrice}}</text>
								</view>
								<image v-if="false" style="width: 18rpx; height: 18rpx;" src="../static/car_helper.png" mode="">
								</image>
								<text style="margin-left: 6rpx;">总价¥{{item.totalPrice}}起</text>
							</view>
							<view class="priceBox">
								<text class="standardPrice" v-if="item.isActivity === 1">¥{{item.averagePrice}}</text>
								<text
									class="priceInfo">{{item.isActivity === 1 ? item.modelPresentPrice : item.averagePrice}}</text>
								<image class="go-arrow" src="../static/go-rightArrow.png" mode=""></image>
							</view>
						</view>
					</view>
					<view style="padding-bottom: 10rpx;">
						<u-loadmore :status="status" @loadmore="loadmore" loadmoreText="点击加载更多" />
					</view>
					
				</scroll-view>
				<mescroll-empty v-else></mescroll-empty>
			</view>
		</view>

		<u-modal title="提示" content="您的账号暂未认证,是否去认证?" :show="showAuthCerAlert" showCancelButton
			@confirm="confirmAuthCer" @cancel="showAuthCerAlert = false">
		</u-modal>
		<u-popup :show="showApplyAlert" mode="top" @close="showApplyAlert=false">
			<appointmentInfo :type="1" @confimChange="confimChange"></appointmentInfo>
		</u-popup>
	</view>
</template>

<script>
	import appointmentInfo from '@/components/appointmentInfo/appointmentInfo.vue'
	import dropDownFilter from '@/components/dropDown-filter/dropDown-filter.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		storeInfoList,
		classificationList,
		classificationMoldelList,
	} from '@/api/home-api.js'
	const moment = require('@/utils/moment.js');

	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			appointmentInfo,
			dropDownFilter
		},
		data() {
			return {
				tenantId: this.$store.state.user.tenantId,
				lat: this.$store.state.user.lat,
				lng: this.$store.state.user.lng,
				//数据源
				categoryList: [], //左边分类list
				carList: [], //车型列表
				currentCarInfo: {}, //当前选择的车辆
				lables: this.$store.state.initData.initData.label, //热门标签
				//筛选相关查询字段
				classification: '', //运营分类
				sort: 0, //排序
				speedChangingBox: null, //变速箱
				priceType: null, //价格区间
				seat: null, //座位
				brandId: null, //品牌
				modelConfig: null, //车型配置
				activity: null,
				label: null, //热门标签
				// 相关弹框显示控制字段
				showAuthCerAlert: false, //认证弹框
				showApplyAlert: false, //门店时间基础信息弹框
				status : 'loadmore',
				pageNo : 1,

			}
		},
		computed: {

			//是否认证下单（1.是 2.否）
			certificationOrder() {
				return this.$store.state.initData.initData.certificationOrder;
			},
			startTime() {
				return this.$store.state.order.startTime;
			},
			endTime() {
				return this.$store.state.order.endTime;
			},
			takeAddress() {
				return this.$store.state.user.address;
			},
			returnAddress() {
				return this.$store.state.user.returnAddress;
			},

			takeCarTime() {
				return moment(this.startTime).format('MM月DD日 HH:mm');

			},
			returnCarTime() {
				return moment(this.endTime).format('MM月DD日 HH:mm');
			},
			duration() {
				const date1 = moment(this.startTime);
				const date2 = moment(this.endTime);
				const duration = date2.diff(date1, 'hour'); //相差的总小时数
				const days = Math.floor(duration / 24); //相差的天数
				const hours = duration % 24; //相差的小时数
				var offsetTime;
				if (hours > 0) {
					offsetTime = days + '天' + hours + '小时';
				} else {
					offsetTime = days + '天';
				}
				return offsetTime;
			},
			censorStatus() {
				return this.$store.state.user.censorStatus;
			},
			storeId(){
				return this.$store.state.user.takeStoreId
			}

		},
		onLoad() {
			this.getStoreInfo();
		},
		methods: {
			//获取门店信息(当首页直接选择的是门店则不需要获取门店信息)
			getStoreInfo() {
				if (this.$u.test.isEmpty(this.storeId)) { //判断当前的取车地点是否为门店->不是门店通过经纬度获取最近的门店信息
					storeInfoList({
						tenantId: this.tenantId,
						lat: this.lat,
						lon: this.lng,
						bizType: this.$store.state.order.businessNo,
					}).then(res => {
						this.$store.commit('user/saveTakeStoreId', res.data.storeId);
						this.getCategoryInfo();
					})
				} else { //有门店信息直接获取
					this.getCategoryInfo();
				}
			},
			//获取运营分类
			getCategoryInfo() {
				classificationList({
					tenantId: this.tenantId,
					storeId: this.storeId,
					bizType: this.$store.state.order.businessNo
				}).then(res => {
					this.categoryList = res.data;
					if (this.categoryList.length > 0) { //如果存在车型分类
						this.classification = this.categoryList[0].classification;
						this.refreshCarList();
					}

				})
			},
			//排序发生改变
			changeSort(code) {
				this.sort = code;
				this.refreshCarList();
			},
			//筛选完成
			filterFinish(data) {
				this.seat = data.seat;
				this.speedChangingBox = data.speedChangingBox;
				this.modelConfig = data.modelConfig;
				this.brandId = data.brandId;
				this.priceType = data.priceType;
				this.activity = data.activity;
				this.refreshCarList();
			},
			//热门标签改变
			changeLable(item) {
				item.selected = !item.selected;
				var labels = [];
				if (this.lables.length > 0) {
					this.lables.forEach(label => {
						if (label.selected) {
							labels.push(label.code);
						}
					})
				}

				this.label = labels;
				if (this.label.length == 0) {
					this.label = null;
				}

				this.refreshCarList();
			},
			//点击运营分类
			tabtap(classification) {
				this.classification = classification;
			
				this.refreshCarList();
			},

			//查询车型列表
			getCategoryMoldelList() {
				uni.showLoading()
				this.status = 'loading';
				classificationMoldelList({
					tenantId: this.tenantId,
					storeId: this.storeId,
					alsoStoreId: this.$store.state.user.returnStoreId,
					startTime: this.startTime,
					endTime: this.endTime,
					classification: this.classification,
					bizType: this.$store.state.order.businessNo,
					sort: this.sort,
					speedChangingBox: this.speedChangingBox,
					priceType: this.priceType,
					seat: this.seat,
					brandId: this.brandId,
					modelConfig: this.modelConfig,
					label: this.label,
					activity : this.activity,
					pageNo: this.pageNo,
					pageSize: 10
				}).then(res => {
					uni.hideLoading();
					if(res.data.length == 0) {
						this.status = 'nomore';
					}else {
						this.status = 'loadmore';
					}
					if(this.pageNo == 1) {
						this.carList = [];
					}
					this.carList = this.carList.concat(res.data);
					for (let item of this.carList) {
						if (!this.$u.test.isEmpty(item.label)) {
							item.labels = item.label.split(',');
						} else {
							item.labels = [];
						}
					}
				})
			},

			//去下单
			goOrder(item) {
				this.currentPlanId = item.planId;
				//判断用户是否登录
				if (this.$store.state.user.isLogin) { //已经登录
					if (this.certificationOrder == 1) { //需要验证实名
						if (this.censorStatus == 2) { //已认证
							this.currentCarInfo = item;
							if (item.carNum > 0) {
								uni.navigateTo({
									url: '../order/confim-order?planId=' + item.planId + '&carUrl=' + item.url +
										'&rentAmount=' + item.modelPresentPrice + '&activityId=' + item.activityId
								})
							} else {
								this.$u.toast('抱歉,当前车型无库存,请选择其他车型下单');
							}
						} else { //未认证->去认证
							this.showAuthCerAlert = true;
						}
					} else { //不需要校验实名
						this.currentCarInfo = item;
						if (item.carNum > 0) {
							uni.navigateTo({
								url: '../order/confim-order?planId=' + item.planId + '&carUrl=' + item.url +
									'&rentAmount=' + item.modelPresentPrice + '&activityId=' + item.activityId
							})
						} else {
							this.$u.toast('抱歉,当前车型无库存,请选择其他车型下单');
						}

					}


				} else { //未登录
					uni.navigateTo({
						url: '../../pages/login/login'
					})
				}

			},


			//确认修改
			confimChange() {
				this.showApplyAlert = false;
				this.getStoreInfo();
			},
			//车型详情
			carDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: './car-detail?planId=' + item.planId + '&carUrl=' + item.url + '&carNum=' + item.carNum
				})
			},

			//价格日历
			priceCalendar(item) {
				uni.navigateTo({
					url: '../calendar/price-calendar?planId=' + item.planId
				})
			},

			//去认证
			confirmAuthCer() {
				this.showAuthCerAlert = false;
				uni.navigateTo({
					url: '../../pages/login/real_name'
				})
			},
			//刷新列表
			refreshCarList() {
				this.pageNo = 1;
				this.getCategoryMoldelList();
			},
			// 加载更多
			loadmore() {
				this.pageNo++;
				this.getCategoryMoldelList();
			},
			onReachBottom() {
				this.pageNo++;
				this.getCategoryMoldelList();
			}

		}
	}
</script>

<style lang="scss">
	.bg {}

	.topBox {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 9999;
		background-color: #fff;
	}

	.configBox {
		margin: 20rpx 35rpx 0;
		background: #F2F3F5;
		border-radius: 40rpx;
		height: 65rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #131313;
		font-size: 22rpx;
		padding: 6rpx 0;

		.storeConfig {
			display: flex;
			flex-direction: column;

			.store {
				max-width: 200rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}


		}

		.duration {
			margin: 0 30rpx;
		}
	}

	.lab-scroll-view {
		white-space: nowrap;
		padding-bottom: 10rpx;

		.label {
			font-size: 24rpx;
			background-color: #F7F9FA;
			color: #333;
			border-radius: 3rpx;
			margin-right: 16rpx;
			line-height: 60rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			position: relative;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			&.active {
				background-color: #E1ECF7;
				color:#188BFD;
				border: #CFE9FF solid 1px;

				&::before {
					content: '';
					display: block;
					width: 26rpx;
					height: 26rpx;
					background-color: #1573FF;
					position: absolute;
					right: -1px;
					bottom: -1px;
					z-index: 1;
					clip-path: ellipse(10px 10px at 10% 20%);
					transform:rotate(180deg);
				}

				&::after {
					content: '';
					display:block;
					width: 2px;
					height: 4px;
					border-right: #fff solid 2px;
					border-bottom: #fff solid 2px;
					transform:rotate(25deg);
					position: absolute;
					right: 2px;
					bottom: 2px;
					z-index: 2;
				}
			}

		}

	}

	.carWrapper {
		position: absolute;
		top: 250rpx;
		left: 0;
		right: 0;
		overflow: hidden;

		.scroll-view {
			height: calc(100vh - 240rpx - env(safe-area-inset-bottom));
			overflow-y: scroll;
		}

		.leftBox {
			width: 150rpx;
			background: #F2F3F5;
			float: left;
			display: block;

			.itemLeft {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				padding: 20upx 0;
				position: relative;

				.title {
					font-size: 26rpx;
					font-weight: bold;
					color: #1E1E1E;
				}

				.price {
					font-size: 20rpx;
					color: #8C8D91;

					&::before {
						content: '¥';
						font-size: 16rpx;
					}
				}

				&.active {
					// color: $main-color;
					background: $bg-white-color;

					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						height: 52rpx;
						width: 12rpx;
						background-color: #1989FA;
						border-radius: 0 12px 12px 0;
						opacity: .8;
					}
				}
			}
		}

		.rightBox {
			width: 600rpx;
			float: right;
			display: block;
			background: #F8F9FB;

			.itemRight {
				padding: 20rpx 10rpx;
				margin-bottom: 20rpx;
				background-color: #fff;

				.carInfoWrapper {
					display: flex;
					align-items: center;
					border-bottom: 1px solid #EDEDED;
					padding-bottom: 10rpx;

					.carImgBox {
						position: relative;

						.mark {
							position: absolute;
							left: 0;
							top: 0;
							width: 100rpx;
							height: 34rpx;
							line-height: 34rpx;
							text-align: center;
							background: #F6E6E6;
							color: #E15A5A;
							font-size: 18rpx;
						}

						.carImg {
							width: 238rpx;
							height: 118rpx;
						}
						
						.zuman {
							display: inline-block;
							width: 80rpx;
							height: 80rpx;
							line-height: 80rpx;
							text-align: center;
							border-radius: 40rpx;
							position: absolute;
							left:65rpx;
							top: 15rpx;
							color: #fff;
							font-size: 24rpx;
							background-color: #000;
							opacity: 0.6;
						}
					}


					.carModelContent {
						display: flex;
						flex-direction: column;
						margin-left: 10rpx;

						.carInfo {
							width: 320rpx;
							color: #262626;
							font-size: 32rpx;
							font-weight: bold;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.carModel {
							margin-top: 8rpx;
							width: 320rpx;
							color: #5A5A5A;
							font-size: 24rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.other {
							margin-top: 15rpx;
							color: #5A5A5A;
							font-size: 24rpx;
						}
					}
				}

				.carLabelWrapper {
					padding: 10rpx;

					.label {
						box-sizing: border-box;
						display: inline-block;
						background: #E8F6FF;
						border: 1rpx solid #9AD3FE;
						padding: 3rpx 14rpx;
						margin-right: 16rpx;
						margin-bottom: 16rpx;
						border-radius: 2rpx;
						color: #0087FF;
						font-size: 20rpx;

						&.active {
							background: linear-gradient(90deg, #2C6BE1 0%, #44AEFE 100%);
							color: #FFFFFF;
							border: none;
						}
					}
				}

				.bottomWrapper {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					position: relative;

					.priceBox {
						.standardPrice {
							font-size: 22rpx;
							text-decoration: line-through;
							color: #999999;
							margin-right: 10rpx;
						}

						.priceInfo {
							color: #E15A5A;
							font-size: 32rpx;
							font-weight: bold;
							position: relative;

							&::before {
								content: '¥';
								font-size: 22rpx;
							}

							&::after {
								content: '/天';
								font-size: 22rpx;
								color: #999999;
							}
						}

						.go-arrow {
							width: 26rpx;
							height: 26rpx;
							margin-left: 15rpx;
							position: relative;
							top: 5rpx;
						}
					}

					.totalPrice {
						margin-right: 10rpx;
						display: inline-block;
						background: #F4EFEF;
						border: 1rpx solid #F3CBCB;
						border-radius: 3rpx;
						color: #E15A5A;
						font-size: 20rpx;
						height: 32rpx;
						line-height: 32rpx;
						text-align: center;
						padding: 0 8rpx;
					}


				}
			}
		}

	}
</style>
